<template>
	<div class="container">
		<div>
			<div class="openAlarm"></div>
			<div>
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>添加告警人</span>
					</div>
					<el-form :model="phoneForm" :rules="phoneRules" ref="phoneForm" label-width="300px">
						<el-form-item label="接收人名称" prop="name">
							<el-input v-model="phoneForm.name"></el-input>
						</el-form-item>
						<el-form-item label="接收人电话" prop="phone">
							<el-input v-model.number="phoneForm.phone"></el-input>
						</el-form-item>
						<el-form-item size="large">
							<el-button type="primary" v-permission @click="onSubmit('phone')">添加</el-button>
						</el-form-item>
					</el-form>
				</el-card>
				<el-card class="box-card" style="margin-top: 25px">
					<div slot="header" class="clearfix">
						<span>告警人列表</span>
					</div>
					<el-table :fit="true" :data="tableData" border style="width: 100%">
						<el-table-column align="center" prop="name" label="姓名">
						</el-table-column>
						<el-table-column align="center" prop="phonenumber" label="账号">
						</el-table-column>
						<el-table-column align="center" prop="osIsenable" label="服务器&网络设备">
							<template v-slot="scope">
								<el-button v-if="scope.row.osIsenable == 'N'" type="success"
									@click="clickWarnStatusOS('Y',scope.row)" v-permission>开启推送</el-button>
								<el-button v-if="scope.row.osIsenable == 'Y'" type="danger"
									@click="clickWarnStatusOS('N',scope.row)" v-permission>关闭推送</el-button>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="dbIsenable" label="数据库">
							<template v-slot="scope">
								<el-button v-if="scope.row.dbIsenable == 'N'" type="success"
									@click="clickWarnStatusDB('Y',scope.row)" v-permission>开启推送</el-button>
								<el-button v-if="scope.row.dbIsenable == 'Y'" type="danger"
									@click="clickWarnStatusDB('N',scope.row)" v-permission>关闭推送</el-button>
							</template>
						</el-table-column>
						<el-table-column align="center" label="操作">
							<template v-slot="scope">
								<el-button type="danger" v-permission @click="handleDelece(scope.row.phonenumber)">删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mail,
		wechat,
		pushPhone,
		delecePhone,
		getPhone,
		editPhone,
	} from "@/api/index.js";
	export default {
		watch: {
			phoneValue: function(n, o) {
				localStorage.setItem("Monitor_alarm_status", n);
				if (n) {
					this.phoneIsDisable = false;
				} else {
					this.phoneIsDisable = true;
				}
			},
		},
		data() {
			return {
				phoneValue: false,
				phoneIsDisable: true,
				phoneForm: {
					name: "",
					phone: "",
				},
				tableData: [],
				phoneRules: {
					name: [{
						required: true,
						message: "请输入名称",
						trigger: "blur",
					}, ],
					phone: [{
							required: true,
							message: "请输入号码",
							trigger: "blur",
						},
						{
							pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/,
							message: "请输入正确的手机号",
						},
					],
				},
				value2: true,
			};
		},
		created() {
			if (localStorage.getItem("Monitor_alarm_status") == "true") {
				this.phoneValue = true;
			} else {
				this.phoneValue = false;
			}
			this.InitTable();
		},
		methods: {
			InitTable() {
				getPhone().then((_) => {
					this.tableData = _;
					console.log(this.tableData,'23')
				});
			},
			onSubmit(type) {
				switch (type) {
					// case "mail":
					//   mail(this.form)
					//     .then((res) => {
					//       this.$message({
					//         type: "success",
					//         message: res.message,
					//       });
					//     })
					//     .catch((err) => {
					//       this.$message({
					//         type: "error",
					//         message: "服务器维护中",
					//       });
					//     });

					//   break;
					// case "wechat":
					//   // console.log(this.wechatValue)
					//   wechat({ users: this.wxform.users, open: this.wechatValue })
					//     .then((res) => {
					//       console.log(res);
					//     })
					//     .catch((err) => {
					//       console.log(err);
					//     });

					//   break;
					case "phone":
						this.$refs["phoneForm"].validate((valid) => {
							if (!valid) {
								return false;
							} else {
								pushPhone(this.phoneForm).then((_) => {
									if (_ === "success") {
										this.$message.success("添加成功");
										this.phoneForm = {
											name: "",
											phone: "",
										};
										this.InitTable();
									} else {
										this.$message.error("添加失败");
									}
								});
							}
						});

						break;
				}
			},
			handleDelece(phone) {
				delecePhone({
					phone
				}).then((_) => {
					if (_ === "success") {
						this.$message.success("删除成功");
						this.InitTable();
					} else {
						this.$message.error("删除失败");
					}
				});
			},
			clickWarnStatusDB(status,scope) {
				console.log(scope);
				editPhone({
					name: scope.name,
					phone: scope.phonenumber,
					dbIsenable:status,
					osIsenable:scope.osIsenable
				}).then((_) => {
					if (_) {
						this.$message.success("操作成功");
						this.InitTable();
					} else {
						this.$message.error("操作失败");
					}
				});
			},
			clickWarnStatusOS(status,scope) {
				console.log(scope);
				editPhone({
					name: scope.name,
					phone: scope.phonenumber,
					dbIsenable:scope.dbIsenable,
					osIsenable:status
				}).then((_) => {
					if (_) {
						this.$message.success("操作成功");
						this.InitTable();
					} else {
						this.$message.error("操作失败");
					}
				});
			},
		},
	};
</script>

<style>
	.clearfix {}

	.openAlarm {
		height: 30px;
		display: block;
		/* margin-bottom: 0px ; */
	}
</style>
